.btn {
    margin: 8px auto;
    flex-shrink: 0;
    width: 160px;
    height: 64px;
    text-align: center;
    align-content: center;
}
.rect {
    background: #f6ed8d;
}

.circle {
    border-radius: 32px;
    background: #7de3c8;
}

.parallelogram {
    position: relative;
    width: 160px;
    height: 64px;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #03f46350;
        transform: skewX(10deg);
    }
}

.parallelogram2 {
    position: relative;
    width: 160px;
    height: 64px;
    background: linear-gradient(to bottom right, transparent 20%, chartreuse 30px,  #9006fb 50%, transparent 70%);
}

.trapezoid {
    position: relative;
    width: 160px;
    height: 64px;

    &::after {
        content:"";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        transform: perspective(40px) rotateX(10deg);
        transform-origin: bottom;
        background: #ff980080;
    }
}

.cutangle {
    background: linear-gradient(135deg, transparent 20px, #ff1493 0);
    background-repeat: no-repeat;
}

.cutangle2 {
    background: linear-gradient(135deg, transparent 20px, #ff1493 50px);
    background-repeat: no-repeat;
}

.clip-notching {
    background: linear-gradient(
            45deg,
            #f9d9e7,
            #ff1493
    );
    clip-path: polygon(
            15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px
    );
}
.clip-notching2 {
    background:
            linear-gradient(135deg, transparent 10px, #ff1493 0) top left,
            linear-gradient(-135deg, transparent 10px, #ff1493 0) top right,
            linear-gradient(-45deg, transparent 10px, #ff1493 0) bottom right,
            linear-gradient(45deg, transparent 10px, #ff1493 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.outside-circle {
    position: relative;
    background: #e91e63;
    border-radius: 10px 10px 0 0;

    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: -20px;
        bottom: 0;
        /*background: #000;*/
        background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
    }
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: -20px;
        bottom: 0;
        /*background: #000;*/
        background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
    }
}

.arc {
    background: red;
    mask-image: radial-gradient(circle at 0 0, transparent 20px, black 20px);
}

.radius-gradient {
    background: radial-gradient(circle, transparent 40%, blue 40%);
    /*background: radial-gradient(circle, red 10%, blue 10%);*/
}

.arrow {
    background: linear-gradient(
            -135deg,
            transparent 22px,
            #04e6fb 22px,
            #65ff9a 100%
    )
    top,
    linear-gradient(
            -45deg,
            transparent 22px,
            #04e6fb 22px,
            #65ff9a 100%
    )
    bottom;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

.arrow-inner {
    background:
        linear-gradient(
            -135deg,
            transparent 22px,
            #04e6fb 22px,
            #65ff9a 100%
    ) bottom,
    linear-gradient(
            -45deg,
            transparent 22px,
            #04e6fb 22px,
            #65ff9a 100%
    )
    top;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

.arrow2 {
        background:
                linear-gradient(135deg, transparent 22px, #ff1493 0) bottom left,
                linear-gradient(-135deg, transparent 22px, #ff1493 0) top right,
                linear-gradient(-45deg, transparent 22px, #ff1493 0) bottom right,
                linear-gradient(45deg, transparent 22px, #ff1493 0) top left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
}
.arrow2-inner {
        background:
                linear-gradient(135deg, transparent 22px, #ff1493 0) bottom left,
                linear-gradient(-45deg, transparent 22px, #ff1493 0) top right,
                linear-gradient(-135deg, transparent 22px, #ff1493 0) bottom right,
                linear-gradient(45deg, transparent 22px, #ff1493 0) top left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
}

